
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Protable - Admin Dashboard Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/media/image/favicon.png"/>

    <!-- Plugin styles -->
    <link rel="stylesheet" href="vendors/bundle.css" type="text/css">

    <!-- App styles -->
    <link rel="stylesheet" href="assets/css/app.min.css" type="text/css">
</head>
<body>

<!-- begin::preloader-->
<div class="preloader">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px" viewBox="0 0 128 128"
         xml:space="preserve">
        <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF"/>
        <g>
            <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"
                  fill="#000000" fill-opacity="1"/>
            <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64"
                              dur="500ms" repeatCount="indefinite">
            </animateTransform>
        </g>
    </svg>
</div>
<!-- end::preloader -->

<!-- begin::navigation -->
<div class="navigation">

    <!-- begin::logo -->
    <div id="logo">
        <a href="index.html">
            <img class="logo" src="assets/media/image/logo.png" alt="logo">
            <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
            <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
        </a>
    </div>
    <!-- end::logo -->

    <!-- begin::navigation header -->
    <header class="navigation-header">
        <figure class="avatar avatar-state-success">
            <img src="assets/media/image/user/man_avatar3.jpg" class="rounded-circle" alt="image">
        </figure>
        <div>
            <h5>Nikos Pedlow</h5>
            <p class="text-muted">Administrator</p>
            <ul class="nav">
                <li class="nav-item">
                    <a href="profile.html" class="btn nav-link bg-info-bright" title="Profile" data-toggle="tooltip">
                        <i data-feather="user"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="btn nav-link bg-success-bright" title="Settings" data-toggle="tooltip">
                        <i data-feather="settings"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="login.html" class="btn nav-link bg-danger-bright" title="Logout" data-toggle="tooltip">
                        <i data-feather="log-out"></i>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <!-- end::navigation header -->

    <!-- begin::navigation menu -->
    <div class="navigation-menu-body">
        <ul>
            <li class="navigation-divider">Main</li>
            <li>
                <a href="index.html">
                    <i class="nav-link-icon" data-feather="bar-chart-2"></i>
                    <span>Dashboard</span>
                </a>
                <ul>
                    <li><a href="index.html">Dashboard 1</a></li>
                    <li><a href="dashboard-two.html">Dashboard 2</a></li>
                </ul>
            </li>
            <li>
                <a href="chat.html">
                    <i class="nav-link-icon" data-feather="message-circle"></i>
                    <span>Chat</span>
                    <span class="badge badge-danger">2</span>
                </a>
            </li>
            <li>
                <a href="inbox.html">
                    <i class="nav-link-icon" data-feather="mail"></i>
                    <span>Mail</span>
                    <span class="badge badge-success">2</span>
                </a>
            </li>
            <li>
                <a href="app-todo.html">
                    <i class="nav-link-icon" data-feather="check-circle"></i>
                    <span>Todo</span>
                    <span class="badge badge-warning">2</span>
                </a>
            </li>
            <li>
                <a href="file-manager.html">
                    <i class="nav-link-icon" data-feather="file"></i>
                    <span>File Manager</span>
                </a>
            </li>
            <li>
                <a href="calendar.html">
                    <i class="nav-link-icon" data-feather="calendar"></i>
                    <span>Calendar</span>
                </a>
            </li>
            <li class="navigation-divider">UI Elements</li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="monitor"></i>
                    <span>Components</span>
                </a>
                <ul>
                    <li>
                        <a href="#">Basic</a>
                        <ul>
                            <li><a href="alerts.html">Alert</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="list-group.html">List Group</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="media-object.html">Media Object</a></li>
                            <li><a href="progress.html">Progress</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="spinners.html">Spinners</a></li>
                            <li><a href="navs.html">Navs</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="popovers.html">Popovers</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Cards</a>
                        <ul>
                            <li><a href="basic-cards.html">Basic Cards </a></li>
                            <li><a href="image-cards.html">Image Cards </a></li>
                            <li><a href="card-scroll.html">Card Scroll </a></li>
                            <li><a href="other-cards.html">Others </a></li>
                        </ul>
                    </li>
                    <li><a href="avatar.html">Avatar</a></li>
                    <li><a href="icons.html">Icons</a></li>
                    <li><a href="colors.html">Colors</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="globe"></i>
                    <span>Plugins</span>
                </a>
                <ul>
                    <li><a href="sweet-alert.html">Sweet Alert</a></li>
                    <li><a href="lightbox.html">Lightbox</a></li>
                    <li><a href="toast.html">Toast</a></li>
                    <li><a href="tour.html">Tour</a></li>
                    <li><a href="slick-slide.html">Slick Slide</a></li>
                    <li><a href="nestable.html">Nestable</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="mouse-pointer"></i>
                    <span>Forms</span>
                </a>
                <ul>
                    <li><a href="basic-form.html">Form Layouts</a></li>
                    <li><a href="custom-form.html">Custom Forms</a></li>
                    <li><a href="advanced-form.html">Advanced Form</a></li>
                    <li><a href="form-validation.html">Validation</a></li>
                    <li><a href="form-wizard.html">Wizard</a></li>
                    <li><a href="file-upload.html">File Upload</a></li>
                    <li><a href="datepicker.html">Datepicker</a></li>
                    <li><a href="timepicker.html">Timepicker</a></li>
                    <li><a href="colorpicker.html">Colorpicker</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="grid"></i>
                    <span>Tables</span>
                </a>
                <ul>
                    <li><a href="tables.html">Basic Tables</a></li>
                    <li><a href="data-table.html">Datatable</a></li>
                    <li><a href="responsive-table.html">Responsive Tables</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="pie-chart"></i>
                    <span>Charts</span>
                </a>
                <ul>
                    <li><a href="apexchart.html">Apex</a></li>
                    <li><a href="chartjs.html">Chartjs</a></li>
                    <li><a href="justgage.html">Justgage</a></li>
                    <li><a href="morsis.html">Morsis</a></li>
                    <li><a href="peity.html">Peity</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="map-pin"></i>
                    <span>Maps</span>
                </a>
                <ul>
                    <li><a href="google-map.html">Google</a></li>
                    <li><a href="vector-map.html">Vector</a></li>
                </ul>
            </li>
            <li class="navigation-divider">Extras</li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="user"></i>
                    <span>Authentication</span>
                </a>
                <ul>
                    <li><a href="login.html">Login</a></li>
                    <li><a href="register.html">Register</a></li>
                    <li><a href="recover-password.html">Recovery Password</a></li>
                    <li><a href="lock-screen.html">Lock Screen</a></li>
                </ul>
            </li>
            <li class="open">
                <a href="#">
                    <i class="nav-link-icon" data-feather="copy"></i>
                    <span>Pages</span>
                </a>
                <ul>
                    <li><a class="active" href="profile.html">Profile</a></li>
                    <li><a href="timeline.html">Timeline</a></li>
                    <li><a href="invoice.html">Invoice</a></li>

                    <li><a href="pricing-table.html">Pricing Table</a></li>
                    <li><a href="search-result.html">Search Result</a></li>
                    <li>
                        <a href="#">Error Pages</a>
                        <ul>
                            <li><a href="404.html">404</a></li>
                            <li><a href="404-2.html">404 V2</a></li>
                            <li><a href="503.html">503</a></li>
                            <li><a href="mean-at-work.html">Mean at Work</a></li>
                        </ul>
                    </li>
                    <li><a href="blank-page.html">Starter Page</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="send"></i>
                    <span>Email Templates</span>
                </a>
                <ul>
                    <li><a href="email-template-basic.html">Basic</a></li>
                    <li><a href="email-template-alert.html">Alert</a></li>
                    <li><a href="email-template-billing.html">Billing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="menu"></i>
                    <span>Menu Level</span>
                </a>
                <ul>
                    <li>
                        <a href="#">Menu Level</a>
                        <ul>
                            <li>
                                <a href="#">Menu Level </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- end::navigation menu -->

</div>
<!-- end::navigation -->

<!-- begin::main -->
<div id="main">

    <!-- begin::header -->
    <div class="header">

        <!-- begin::header left -->
        <ul class="navbar-nav">

            <!-- begin::navigation-toggler -->
            <li class="nav-item navigation-toggler">
                <a href="#" class="nav-link">
                    <i data-feather="menu"></i>
                </a>
            </li>
            <!-- end::navigation-toggler -->

            <!-- begin::header-logo -->
            <li class="nav-item" id="header-logo">
                <a href="index.html">
                    <img class="logo" src="assets/media/image/logo.png" alt="logo">
                    <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
                    <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
                </a>
            </li>
            <!-- end::header-logo -->
        </ul>
        <!-- end::header left -->

        <!-- begin::header-right -->
        <div class="header-right">
            <ul class="navbar-nav">

                <!-- begin::search-form -->
                <li class="nav-item search-form">
                    <div class="row">
                        <div class="col-md-6">
                            <form>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <div class="input-group-append">
                                        <button class="btn btn-default" type="button">
                                            <i data-feather="search"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </li>
                <!-- end::search-form -->

                <!-- begin::header minimize/maximize -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link" title="Fullscreen" data-toggle="fullscreen">
                        <i class="maximize" data-feather="maximize"></i>
                        <i class="minimize" data-feather="minimize"></i>
                    </a>
                </li>
                <!-- end::header minimize/maximize -->

                <!-- begin::header app list -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link" title="Apps" data-toggle="dropdown">
                        <i data-feather="grid"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-3">
                            <h6 class="text-uppercase font-size-11 mb-3">Web Apps</h6>
                            <div class="row row-xs">
                                <div class="col-6">
                                    <a href="chat.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center mb-3">
                                            <i class="text-success width-23 height-23"
                                               data-feather="message-circle"></i>
                                            <div class="mt-2">Chat</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="inbox.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center mb-3">
                                            <i class="text-info width-23 height-23" data-feather="mail"></i>
                                            <div class="mt-2">Mail</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="calendar.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center">
                                            <i class="text-warning width-23 height-23" data-feather="calendar"></i>
                                            <div class="mt-2">Calendar</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="file-manager.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center">
                                            <i class="text-danger width-23 height-23" data-feather="file"></i>
                                            <div class="mt-2">File Manager</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- end::header app list -->

                <!-- begin::header messages dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link nav-link-notify" title="Messages" data-toggle="dropdown">
                        <i data-feather="message-circle"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                            <h6 class="mb-1">Messages</h6>
                            <small class="font-size-11 opacity-7">2 unread messages</small>
                        </div>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar1.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Herbie Pallatina
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">02:30 PM</span>
                                                <span>Have you madimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/women_avatar5.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Andrei Miners
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">08:36 PM</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-divider small pb-2 pl-3 pt-3">
                                    <span>Old chats</span>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar3.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Kevin added
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">11:09 PM</span>
                                                <span>Have you madimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar2.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Eugenio Carnelley
                                                <i title="Mark as read" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">Yesterday</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/women_avatar1.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Neely Ferdinand
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">Yesterday</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="p-2 text-right">
                            <ul class="list-inline small">
                                <li class="list-inline-item">
                                    <a href="#">Mark All Read</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <!-- end::header messages dropdown -->

                <!-- begin::header notification dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link nav-link-notify" title="Notifications" data-toggle="dropdown">
                        <i data-feather="bell"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                            <h6 class="mb-1">Notifications</h6>
                            <small class="font-size-11 opacity-7">1 unread notifications</small>
                        </div>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-success-bright text-success rounded-circle">
                                                    <i class="ti-user"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                New customer registered
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">20 min ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-divider small pb-2 pl-3 pt-3">
                                    <span>Old notifications</span>
                                </li>
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-warning-bright text-warning rounded-circle">
                                                    <i class="ti-package"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                New Order Recieved
                                                <i title="Mark as read" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">45 sec ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-danger-bright text-danger rounded-circle">
                                                    <i class="ti-server"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Server Limit Reached!
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">55 sec ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-info-bright text-info rounded-circle">
                                                    <i class="ti-layers"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Apps are ready for update
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">Yesterday</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="p-2 text-right">
                            <ul class="list-inline small">
                                <li class="list-inline-item">
                                    <a href="#">Mark All Read</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <!-- end::header notification dropdown -->
            </ul>

            <!-- begin::mobile header toggler -->
            <ul class="navbar-nav d-flex align-items-center">
                <li class="nav-item header-toggler">
                    <a href="#" class="nav-link">
                        <i data-feather="arrow-down"></i>
                    </a>
                </li>
            </ul>
            <!-- end::mobile header toggler -->
        </div>
        <!-- end::header-right -->
    </div>
    <!-- end::header -->

    <!-- begin::main-content -->
    <main class="main-content">

        <div class="container">

            <div class="row">
                <div class="col-md-4">

                    <div class="card">
                        <div class="card-body text-center">
                            <figure class="avatar avatar-lg m-b-20">
                                <img src="assets/media/image/user/man_avatar3.jpg" class="rounded-circle" alt="...">
                            </figure>
                            <h5 class="mb-1">Nikos Pedlow</h5>
                            <p class="text-muted small">Web Developer</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus repudiandae eveniet
                                harum.</p>
                            <a href="#" class="btn btn-outline-primary">
                                <i data-feather="edit-2" class="mr-2"></i> Edit Profile
                            </a>
                        </div>
                        <hr class="m-0">
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-4 text-info">
                                    <h4 class="font-weight-bold">291</h4>
                                    <span>Post</span>
                                </div>
                                <div class="col-4 text-success">
                                    <h4 class="font-weight-bold">10.596</h4>
                                    <span>Followers</span>
                                </div>
                                <div class="col-4 text-warning">
                                    <h4 class="font-weight-bold">7.896</h4>
                                    <span>Likes</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title d-flex justify-content-between align-items-center">
                                Information
                                <a href="#" class="btn btn-outline-light btn-sm">
                                    <i data-feather="edit-2" class="mr-2"></i> Edit
                                </a>
                            </h6>
                            <div class="row mb-2">
                                <div class="col-6 text-muted">First Name:</div>
                                <div class="col-6">Johnatan</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 text-muted">Last Name:</div>
                                <div class="col-6">Due</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 text-muted">Age:</div>
                                <div class="col-6">26</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 text-muted">Position:</div>
                                <div class="col-6">Web Designer</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 text-muted">City:</div>
                                <div class="col-6">New York, USA</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 text-muted">Address:</div>
                                <div class="col-6">228 Park Ave Str.</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 text-muted">Phone:</div>
                                <div class="col-6">+1-202-555-0134</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 text-muted">Email:</div>
                                <div class="col-6">johndue@gmail.com</div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title d-flex justify-content-between align-items-center">
                                Photos
                                <a href="#" class="btn btn-outline-light btn-sm">
                                    <i data-feather="upload" class="mr-2"></i> Upload
                                </a>
                            </h6>
                            <div class="row row-xs">
                                <div class="col-lg-4 mb-3">
                                    <img class="img-fluid rounded" src="assets/media/image/portfolio-one.jpg"
                                         alt="image">
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <img class="img-fluid rounded" src="assets/media/image/portfolio-two.jpg"
                                         alt="image">
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <img class="img-fluid rounded" src="assets/media/image/portfolio-three.jpg"
                                         alt="image">
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <img class="img-fluid rounded" src="assets/media/image/portfolio-four.jpg"
                                         alt="image">
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <img class="img-fluid rounded" src="assets/media/image/portfolio-five.jpg"
                                         alt="image">
                                </div>
                                <div class="col-lg-4 mb-3">
                                    <img class="img-fluid rounded" src="assets/media/image/portfolio-six.jpg"
                                         alt="image">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title">Skills</h6>
                            <div class="mb-4">
                                <div class="text-muted mb-2">
                                    <div class="icon-block icon-block-sm icon-block-floating icon-block-outline-primary text-primary m-r-10">
                                        <i class="fa fa-user"></i>
                                    </div>
                                    <span class="text-uppercase font-size-11">Graphic Design</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="progress flex-grow-1" style="height: 5px">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: 42%;"
                                             aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <span class="h6 mb-0 ml-3">42%</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="text-muted mb-2">
                                    <div class="icon-block icon-block-sm icon-block-floating icon-block-outline-danger text-danger m-r-10">
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <span class="text-uppercase font-size-11">Web Design</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="progress flex-grow-1" style="height: 5px">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 75%;"
                                             aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <span class="h6 mb-0 ml-3">75%</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="text-muted mb-2">
                                    <div class="icon-block icon-block-sm icon-block-floating icon-block-outline-warning text-warning m-r-10">
                                        <i class="fa fa-bar-chart"></i>
                                    </div>
                                    <span class="text-uppercase font-size-11">Software</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="progress flex-grow-1" style="height: 5px">
                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 50%;"
                                             aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <span class="h6 mb-0 ml-3">50%</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="text-muted mb-2">
                                    <div class="icon-block icon-block-sm icon-block-floating icon-block-outline-success text-success m-r-10">
                                        <i class="fa fa-cloud-upload"></i>
                                    </div>
                                    <span class="text-uppercase font-size-11">Contact Management</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="progress flex-grow-1" style="height: 7px">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 22%;"
                                             aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <span class="h6 mb-0 ml-3">22%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-md-8">

                    <div class="card">
                        <div class="card-body">
                            <form>
                                <div class="form-group">
                                    <textarea rows="2" class="form-control" placeholder="Create something"></textarea>
                                </div>
                                <div class="text-right">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="#" data-toggle="tooltip" title="Add Image"
                                               class="btn btn-outline-light">
                                                <i data-feather="image"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="#" data-toggle="tooltip" title="Add Video"
                                               class="btn btn-outline-light">
                                                <i data-feather="video"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="#" data-toggle="tooltip" title="Add File"
                                               class="btn btn-outline-light">
                                                <i data-feather="file"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <button class="btn btn-primary">Submit</button>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <ul class="nav nav-pills flex-column flex-sm-row" id="myTab" role="tablist">
                                <li class="flex-sm-fill text-sm-center nav-item">
                                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home"
                                       role="tab" aria-selected="true">Posts</a>
                                </li>
                                <li class="flex-sm-fill text-sm-center nav-item">
                                    <a class="nav-link" id="timeline-tab" data-toggle="tab" href="#timeline"
                                       role="tab" aria-selected="true">Timeline</a>
                                </li>
                                <li class="flex-sm-fill text-sm-center nav-item">
                                    <a class="nav-link" id="connections-tab1" data-toggle="tab" href="#connections"
                                       role="tab"
                                       aria-selected="false">
                                        Connections <span class="badge badge-light m-l-5">6</span>
                                    </a>
                                </li>
                                <li class="flex-sm-fill text-sm-center nav-item">
                                    <a class="nav-link" id="earnings-tab" data-toggle="tab" href="#earnings" role="tab"
                                       aria-selected="false">Earnings</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex mb-3">
                                        <div class="d-flex align-items-center">
                                            <figure class="avatar avatar-sm mr-3">
                                                <img src="assets/media/image/user/man_avatar3.jpg"
                                                     class="rounded-circle" alt="...">
                                            </figure>
                                            <div class="d-inline-block">
                                                <div><strong>Martina Ash</strong> shared a link</div>
                                                <small class="text-muted">7 hours ago</small>
                                            </div>
                                        </div>
                                        <div class="dropdown ml-auto">
                                            <a href="#" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#" class="dropdown-item">Share</a>
                                                <a href="#" class="dropdown-item">Edit</a>
                                                <a href="#" class="dropdown-item">Delete</a>
                                            </div>
                                        </div>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolor eos id ipsa
                                        nobis omnis, tenetur? Dolor officiis omnis quo?</p>
                                    <a href="#">
                                        <div class="row no-gutters border border-radius-1">
                                            <div class="col-3">
                                                <img src="assets/media/image/photo8.jpg" class="img-fluid" alt="image">
                                            </div>
                                            <div class="col-9 p-3">
                                                <h5>Algolia Integration</h5>
                                                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing
                                                    elit. Cumque dolor, eos laudantium maxime perferendis veritatis.</p>
                                                <small class="text-primary">https://themeforest.net/</small>
                                            </div>
                                        </div>
                                    </a>
                                    <div class="d-flex justify-content-between align-items-center mt-4">
                                        <div>
                                            <a href="#" title="Like" data-toggle="tooltip">
                                                <i data-feather="heart" class="width-17 height-17 mr-1"></i> 42
                                            </a>
                                        </div>
                                        <div>
                                            <a href="#" title="Comments" data-toggle="tooltip">
                                                <i data-feather="message-square" class="width-17 height-17 mr-1"></i> 3
                                            </a>
                                            <a href="#" class="ml-3" title="Share" data-toggle="tooltip">
                                                <i data-feather="share-2" class="width-17 height-17 mr-1"></i> 1
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex mb-3">
                                        <div class="d-flex align-items-center">
                                            <figure class="avatar avatar-sm mr-3">
                                                <img src="assets/media/image/user/man_avatar3.jpg"
                                                     class="rounded-circle" alt="...">
                                            </figure>
                                            <div class="d-inline-block">
                                                <div><strong>Martina Ash</strong> shared a link</div>
                                                <small class="text-muted">7 hours ago</small>
                                            </div>
                                        </div>
                                        <div class="dropdown ml-auto">
                                            <a href="#" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#" class="dropdown-item">Share</a>
                                                <a href="#" class="dropdown-item">Edit</a>
                                                <a href="#" class="dropdown-item">Delete</a>
                                            </div>
                                        </div>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam doloremque
                                        eveniet illo minus nemo obcaecati, voluptatem? At corporis cum dolorem eos
                                        impedit in magni officiis quibusdam, ratione sequi totam voluptatum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolor eos id ipsa
                                        nobis omnis, tenetur? Dolor officiis omnis quo?</p>
                                    <div class="d-flex justify-content-between align-items-center mt-4">
                                        <div>
                                            <a href="#" title="Like" data-toggle="tooltip">
                                                <i data-feather="heart"
                                                   class="width-17 height-17 mr-1 text-danger"></i> 142
                                            </a>
                                        </div>
                                        <div>
                                            <a href="#" title="Comments" data-toggle="tooltip">
                                                <i data-feather="message-square" class="width-17 height-17 mr-1"></i> 13
                                            </a>
                                            <a href="#" class="ml-3" title="Share" data-toggle="tooltip">
                                                <i data-feather="share-2" class="width-17 height-17 mr-1"></i> 4
                                            </a>
                                        </div>
                                    </div>
                                    <!-- People who wrote, liked, or shared a comment -->
                                    <div class="mt-4">
                                        <div class="card card-body border p-3">
                                            <div class="d-flex mb-3">
                                                <div class="d-flex align-items-center">
                                                    <figure class="avatar avatar-sm mr-3">
                                                        <img src="assets/media/image/user/man_avatar1.jpg"
                                                             class="rounded-circle" alt="...">
                                                    </figure>
                                                    <div class="d-inline-block">
                                                        <div><strong>Martina Ash</strong> shared a link</div>
                                                        <small class="text-muted">7 hours ago</small>
                                                    </div>
                                                </div>
                                                <div class="dropdown ml-auto">
                                                    <a href="#" data-toggle="dropdown">
                                                        <i class="fa fa-ellipsis-v"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <a href="#" class="dropdown-item">Share</a>
                                                        <a href="#" class="dropdown-item">Edit</a>
                                                        <a href="#" class="dropdown-item">Delete</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus,
                                                ducimus?</p>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <a href="#" title="Like" data-toggle="tooltip">
                                                        <i data-feather="heart" class="width-17 height-17 mr-1"></i> 3
                                                    </a>
                                                    <a href="#" class="ml-3">
                                                        Reply
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card card-body border p-3">
                                            <div class="d-flex mb-3">
                                                <div class="d-flex align-items-center">
                                                    <figure class="avatar avatar-sm mr-3">
                                                        <img src="assets/media/image/user/women_avatar2.jpg"
                                                             class="rounded-circle" alt="...">
                                                    </figure>
                                                    <div class="d-inline-block">
                                                        <div><strong>Martina Ash</strong> shared a link</div>
                                                        <small class="text-muted">7 hours ago</small>
                                                    </div>
                                                </div>
                                                <div class="dropdown ml-auto">
                                                    <a href="#" data-toggle="dropdown">
                                                        <i class="fa fa-ellipsis-v"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <a href="#" class="dropdown-item">Share</a>
                                                        <a href="#" class="dropdown-item">Edit</a>
                                                        <a href="#" class="dropdown-item">Delete</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad,
                                                assumenda at atque corporis culpa earum id illum impedit laborum maxime
                                                minus nisi omnis quod sequi suscipit totam veritatis voluptatum.</p>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <a href="#" title="Like" data-toggle="tooltip">
                                                        <i data-feather="heart" class="width-17 height-17 mr-1"></i> 1
                                                    </a>
                                                    <a href="#" class="ml-3">
                                                        Reply
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <form class="d-flex">
                                            <div>
                                                <figure class="avatar avatar-sm mr-3">
                                                    <img src="assets/media/image/user/women_avatar2.jpg"
                                                         class="rounded-circle" alt="...">
                                                </figure>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="form-group">
                                                    <textarea rows="2" class="form-control"
                                                              placeholder="Post comment for @Martina"></textarea>
                                                </div>
                                                <button class="btn btn-primary">Submit</button>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- ./ People who wrote, liked, or shared a comment -->
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex mb-3">
                                        <div class="d-flex align-items-center">
                                            <figure class="avatar avatar-sm mr-3">
                                                <img src="assets/media/image/user/man_avatar3.jpg"
                                                     class="rounded-circle" alt="...">
                                            </figure>
                                            <div class="d-inline-block">
                                                <div>Anna Mull</div>
                                                <small class="text-muted">7 hours ago</small>
                                            </div>
                                        </div>
                                        <div class="dropdown ml-auto">
                                            <a href="#" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a href="#" class="dropdown-item">Share</a>
                                                <a href="#" class="dropdown-item">Edit</a>
                                                <a href="#" class="dropdown-item">Delete</a>
                                            </div>
                                        </div>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolor eos id ipsa
                                        nobis omnis, tenetur? Dolor officiis omnis quo?</p>
                                    <div class="row row-xs">
                                        <div class="col-6">
                                            <img src="assets/media/image/photo9.jpg" class="w-100 border-radius-1"
                                                 alt="image">
                                        </div>
                                        <div class="col-6">
                                            <img src="assets/media/image/photo10.jpg" class="w-100 border-radius-1"
                                                 alt="image">
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-4">
                                        <div>
                                            <a href="#" title="Like" data-toggle="tooltip">
                                                <i data-feather="heart"
                                                   class="width-17 height-17 mr-1"></i> 311
                                            </a>
                                        </div>
                                        <div>
                                            <a href="#" title="Comments" data-toggle="tooltip">
                                                <i data-feather="message-square" class="width-17 height-17 mr-1"></i> 33
                                            </a>
                                            <a href="#" class="ml-3" title="Share" data-toggle="tooltip">
                                                <i data-feather="share-2" class="width-17 height-17 mr-1"></i> 14
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade show" id="timeline" role="tabpanel">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">Timeline</h6>
                                    <div class="timeline">
                                        <div class="timeline-item">
                                            <div>
                                                <a href="#">
                                                    <figure class="avatar avatar-sm mr-3 bring-forward">
                                                        <img src="assets/media/image/user/women_avatar4.jpg"
                                                             class="rounded-circle" alt="image">
                                                    </figure>
                                                </a>
                                            </div>
                                            <div>
                                                <h6 class="d-flex justify-content-between mb-4">
                                            <span>
                                                <a href="#">Martina Ash</a> shared a link
                                            </span>
                                                    <span class="text-muted font-weight-normal">Tue 8:17pm</span>
                                                </h6>
                                                <a href="#">
                                                    <div class="mb-3 border border-radius-1">
                                                        <div class="row no-gutters">
                                                            <div class="col-2">
                                                                <img src="assets/media/image/photo6.jpg" class="w-100"
                                                                     alt="image">
                                                            </div>
                                                            <div class="col-10 p-3">
                                                                <h5 class="line-height-16">Connection title</h5>
                                                                Lorem ipsum dolor sit amet, consectetur adipisicing
                                                                elit. Facilis, voluptatibus.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="timeline-item">
                                            <div>
                                                <figure class="avatar avatar-sm mr-3 bring-forward">
                                                    <span class="avatar-title bg-success-bright text-success rounded-circle">C</span>
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="d-flex justify-content-between mb-4">
                                            <span>
                                                <a href="#">Jonny Richie</a> shared a post
                                            </span>
                                                    <span class="text-muted font-weight-normal">Tue 8:17pm</span>
                                                </h6>
                                                <a href="#">
                                                    <div class="mb-3 border p-3 border-radius-1">
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
                                                        aliquid aperiam commodi culpa debitis deserunt enim itaque
                                                        laborum minima neque nostrum pariatur perspiciatis, placeat
                                                        quidem, ratione recusandae reiciendis sapiente, ut veritatis
                                                        vitae. Beatae dolore hic odio! Esse officiis quidem voluptate.
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="timeline-item">
                                            <div>
                                                <figure class="avatar avatar-sm mr-3 bring-forward">
                                                    <span class="avatar-title bg-info-bright text-info rounded-circle">K</span>
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="d-flex justify-content-between mb-4">
                                            <span>
                                                <a href="#">Jonny Richie</a> attached file
                                            </span>
                                                    <span class="text-muted font-weight-normal">Tue 8:17pm</span>
                                                </h6>
                                                <a href="#">
                                                    <div class="mb-3 border p-3 border-radius-1">
                                                        <i class="fa fa-file-pdf-o mr-2"></i> filename12334.pdf
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="timeline-item">
                                            <div>
                                                <figure class="avatar avatar-sm mr-3 bring-forward">
                                            <span class="avatar-title bg-warning-bright text-warning rounded-circle">
                                                <i class="ti-image"></i>
                                            </span>
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="d-flex justify-content-between mb-4">
                                            <span>
                                                <a href="#">Jonny Richie</a> shared files
                                            </span>
                                                    <span class="text-muted font-weight-normal">Tue 8:17pm</span>
                                                </h6>
                                                <div class="row row-xs">
                                                    <div class="col-xl-3 col-lg-4 col-md-6">
                                                        <figure>
                                                            <img src="assets/media/image/portfolio-five.jpg"
                                                                 class="w-100 border-radius-1" alt="image">
                                                        </figure>
                                                    </div>
                                                    <div class="col-xl-3 col-lg-4 col-md-6">
                                                        <figure>
                                                            <img src="assets/media/image/portfolio-one.jpg"
                                                                 class="w-100 border-radius-1" alt="image">
                                                        </figure>
                                                    </div>
                                                    <div class="col-xl-3 col-lg-4 col-md-6">
                                                        <figure>
                                                            <img src="assets/media/image/portfolio-three.jpg"
                                                                 class="w-100 border-radius-1" alt="image">
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="timeline-item">
                                            <div>
                                                <figure class="avatar avatar-sm mr-3 bring-forward">
                                                    <span class="avatar-title bg-youtube rounded-circle">Y</span>
                                                </figure>
                                            </div>
                                            <div>
                                                <h6 class="d-flex justify-content-between">
                                           <span>
                                               <a href="#">Jonny Richie</a> shared video
                                           </span>
                                                    <span class="text-muted font-weight-normal">Tue 8:17pm</span>
                                                </h6>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto,
                                                    placeat.</p>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="embed-responsive embed-responsive-16by9 m-t-b-5">
                                                            <iframe class="embed-responsive-item"
                                                                    src="https://www.youtube.com/embed/l-epKcOA7RQ"
                                                                    allowfullscreen></iframe>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="connections" role="tabpanel">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">Connections</h6>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-12">
                                            <div class="card border">
                                                <div class="card-body p-3">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <figure class="avatar mr-3">
                                                                <img src="assets/media/image/user/women_avatar1.jpg"
                                                                     class="rounded-circle" alt="...">
                                                            </figure>
                                                        </div>
                                                        <div>
                                                            <p class="mb-0">Rosemary Krout</p>
                                                            <p class="small text-muted mb-0 line-height-15">
                                                                Team Leader
                                                            </p>
                                                        </div>
                                                        <a href="#" class="ml-auto" title="Message"
                                                           data-toggle="tooltip">
                                                            <i data-feather="message-circle"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-12">
                                            <div class="card border">
                                                <div class="card-body p-3">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <figure class="avatar mr-3">
                                                                <img src="assets/media/image/user/man_avatar1.jpg"
                                                                     class="rounded-circle" alt="...">
                                                            </figure>
                                                        </div>
                                                        <div>
                                                            <p class="mb-0">Miller Edwins</p>
                                                            <p class="small text-muted mb-0 line-height-15">
                                                                Team Leader
                                                            </p>
                                                        </div>
                                                        <a href="#" class="ml-auto" title="Message"
                                                           data-toggle="tooltip">
                                                            <i data-feather="message-circle"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-12">
                                            <div class="card border">
                                                <div class="card-body p-3">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <figure class="avatar mr-3">
                                                                <img src="assets/media/image/user/man_avatar2.jpg"
                                                                     class="rounded-circle" alt="...">
                                                            </figure>
                                                        </div>
                                                        <div>
                                                            <p class="mb-0">Cahra Smiz</p>
                                                            <p class="small text-muted mb-0 line-height-15">
                                                                Agent
                                                            </p>
                                                        </div>
                                                        <a href="#" class="ml-auto" title="Message"
                                                           data-toggle="tooltip">
                                                            <i data-feather="message-circle"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-12">
                                            <div class="card border">
                                                <div class="card-body p-3">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <figure class="avatar mr-3">
                                                                <img src="assets/media/image/user/women_avatar4.jpg"
                                                                     class="rounded-circle" alt="...">
                                                            </figure>
                                                        </div>
                                                        <div>
                                                            <p class="mb-0">Burgess Attwool</p>
                                                            <p class="small text-muted mb-0 line-height-15">
                                                                Contact
                                                            </p>
                                                        </div>
                                                        <a href="#" class="ml-auto" title="Message"
                                                           data-toggle="tooltip">
                                                            <i data-feather="message-circle"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-12">
                                            <div class="card border">
                                                <div class="card-body p-3">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <figure class="avatar mr-3">
                                                                <img src="assets/media/image/user/women_avatar2.jpg"
                                                                     class="rounded-circle" alt="...">
                                                            </figure>
                                                        </div>
                                                        <div>
                                                            <p class="mb-0">Allx Life</p>
                                                            <p class="small text-muted mb-0 line-height-15">
                                                                Agent
                                                            </p>
                                                        </div>
                                                        <a href="#" class="ml-auto" title="Message"
                                                           data-toggle="tooltip">
                                                            <i data-feather="message-circle"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-12">
                                            <div class="card border">
                                                <div class="card-body p-3">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <figure class="avatar mr-3">
                                                                <img src="assets/media/image/user/women_avatar3.jpg"
                                                                     class="rounded-circle" alt="...">
                                                            </figure>
                                                        </div>
                                                        <div>
                                                            <p class="mb-0">Marti Sorbey</p>
                                                            <p class="small text-muted mb-0 line-height-15">
                                                                Contact
                                                            </p>
                                                        </div>
                                                        <a href="#" class="ml-auto" title="Message"
                                                           data-toggle="tooltip">
                                                            <i data-feather="message-circle"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="earnings" role="tabpanel">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">Earnings</h6>
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead class="thead-light">
                                            <tr>
                                                <th>Date</th>
                                                <th>Item Sales Count</th>
                                                <th>Earnings</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>monday, 12</td>
                                                <td>
                                                    3
                                                </td>
                                                <td>$400</td>
                                            </tr>
                                            <tr>
                                                <td>tuesday, 13</td>
                                                <td>
                                                    2
                                                </td>
                                                <td>$400</td>
                                            </tr>
                                            <tr>
                                                <td>wednesday, 14</td>
                                                <td>
                                                    3
                                                </td>
                                                <td>$420</td>
                                            </tr>
                                            <tr>
                                                <td>thursday, 15</td>
                                                <td>
                                                    5
                                                </td>
                                                <td>$500</td>
                                            </tr>
                                            <tr>
                                                <td>friday, 15</td>
                                                <td>
                                                    3
                                                </td>
                                                <td>$400</td>
                                            </tr>
                                            <tr>
                                                <td>saturday, 16</td>
                                                <td>
                                                    3
                                                </td>
                                                <td>$400</td>
                                            </tr>
                                            <tr>
                                                <td>sunday, 17</td>
                                                <td>
                                                    3
                                                </td>
                                                <td>$400</td>
                                            </tr>
                                            <tr>
                                                <td>monday, 18</td>
                                                <td>
                                                    3
                                                </td>
                                                <td>$500</td>
                                            </tr>
                                            <tr>
                                                <td>tuesday, 19</td>
                                                <td>
                                                    3
                                                </td>
                                                <td>$400</td>
                                            </tr>
                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <th></th>
                                                <th>28</th>
                                                <th>$3720</th>
                                            </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </main>
    <!-- end::main-content -->

    <!-- begin::footer -->
    <footer>
        <div class="container">
            <div>© 2019 Protable v1.0.0 Made by <a href="http://laborasyon.com">Laborasyon</a></div>
            <div>
                <nav class="nav">
                    <a href="https://themeforest.net/licenses/standard" class="nav-link">Licenses</a>
                    <a href="#" class="nav-link">Change Log</a>
                    <a href="#" class="nav-link">Get Help</a>
                </nav>
            </div>
        </div>
    </footer>
    <!-- end::footer -->

</div>
<!-- end::main -->

<!-- Plugin scripts -->
<script src="vendors/bundle.js"></script>

<!-- App scripts -->
<script src="assets/js/app.min.js"></script>
</body>
</html>